<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>HTML5 Canvas文字粒子动画DEMO演示</title>
    <style type="text/css">
        html,body {
            background: #EDEDED;
            margin: 0;
            padding: 0;
            font-family: arial;
            height:100%;
            width:100%;
        }
        canvas{
            width:100%;
            height:100%;
        }
        .panel{
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            position:absolute;
            padding:10px;
            left:20px;
            top:0px;
            background-color: white;
            border: 2px solid #8796ff;
            border-radius: 8px;
            height:200px;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<div class="panel">
    <div>
        文本:
        <input id="text" type="text" value="1" onchange="changeText(event)">
    </div>

    <div>
        重力:
        <input onchange="changeV()" type="range" id="gravity" value="0" max="1" min="-1" step="0.1">
    </div>

    <div>
        速度:
        <input onchange="changeV()" type="range" id="speed" value="0.3" max="1" min="0.01" step="0.01">
    </div>

    <div>
        偏移量:
        <input onchange="changeV()" type="range" id="offset" value="0.1" max="5" min="0" step="0.01">
    </div>

    <div>
        大小:
        <input onchange="changeV()" type="range" id="radius" value="3" max="20" min="1.8" step="0.1">
    </div>

    <div>
        稀疏程度:
        <input type="range" id="duration" value="5" max="15" min="3" step="1" onchange="changeV()">
    </div>

</div>
<script src="js/index2.js"></script>
</body>
</html>
